<h3>
  Synchronous data
  <a lv-link href="#" (click)="goToLink($event)">table default filter</a>
</h3>

<div [class.filter-section]="filterTags.length">
  <lv-tag
    [ngModel]="filterTags"
    [ngModelOptions]="{ standalong: true }"
    [lvTagTemplate]="tagTpl"
    lvShowClearAll
    [lvBeforeRemove]="beforeRemove"
    [lvBeforeClearAll]="beforeRemove"
    (lvClearAll)="clearFilterState()"
    (lvRemove)="removeFilterState($event)"
  ></lv-tag>
  <ng-template #tagTpl let-item let-index="index">
    <div class="lv-tag-text" lv-overflow>{{ item.label.key }}: {{ item.label.value }}</div>
  </ng-template>
</div>

<lv-datatable
  #lvTable
  lvAsync
  [lvData]="data"
  lvCompareWith="id"
  lvSort
  #sort="lvSort"
  [lvSortDirct]="sort"
  lvSelectionMode="multiple"
  [lvSelection]="selection"
  (lvSelectionChange)="selectionChange($event)"
  [lvPaginator]="page"
  (lvStateChange)="stateChange($event)"
>
  <thead>
    <tr>
      <th lvShowCheckbox width="40px" [lvRowsData]="lvTable.renderData | selectable"></th>
      <th lvCellKey="id">Id</th>
      <th lvCellKey="name">Name</th>
      <th
        lvShowSort
        lvCellKey="age"
        lvShowFilter
        lvFilterSearch
        [lvFilterMultiple]="false"
        [(lvFilters)]="filtersMap.age"
        (lvFilterChange)="filterChange($event)"
      >
        Age
      </th>
      <th lvCellKey="random" lvShowFilter [lvFilters]="filtersMap.random" (lvFilterChange)="filterChange($event)">Random</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable.renderData">
      <tr>
        <td lvShowCheckbox [lvRowData]="item" [lvDisabled]="item.disabled" [lvCheckboxTip]="item.checkboxTip"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.random }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<lv-paginator [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageIndex" #page></lv-paginator>
